<template>
	<view>
		<view class="d-recommend" v-for="(item,index) in list" :key="item.video.id">
			<view class="d-video" @click="tuVideoItem(item.video)">
				<view class="d-title">{{item.video.title}}</view>
				<view class="video-cover">
					<image :src="item.video.cover_img"></image>
					<view class="bg">
						<image src="../../../../static/icon/isplay.png"></image>
					</view>
				</view>
				<view class="d-footer">
					<view class="user-name">{{item.video.user_name}}</view>
					<view class="pinlun">{{item.video.pinglun}}评论</view>
					<view class="tiem">{{item.video.time|getTime}}</view>
				</view>
			</view>
			<view class="d-article" @click="tuArticle(data)" v-for="data in item.data" :key="data.id">
				<view class="d-title">{{data.title}}</view>
				<view class="article-cover">
					<view class="img">
						<image :src="data.cover_img" mode=""></image>
					</view>
					<view class="img img-two">
						<image :src="data.cover_img2" mode=""></image>
					</view>
					<view class="img">
						<image :src="data.cover_img3" mode=""></image>
					</view>
				</view>
				<view class="d-footer">
					<view class="user-name">{{data.user_name}}</view>
					<view class="pinlun">{{data.pinglun}}评论</view>
					<view class="tiem" >{{data.time|getTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';

	export default {
		data() {
			return {
				
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			}
		},
		methods: {
			tuVideoItem(item) {
				uni.navigateTo({
					url: "/pages/index/i-video/i-video/i-video"
				})

				getApp().globalData.i_video = item;
			},

			tuArticle(data) {
				uni.navigateTo({
					url: "/pages/index/i-article/i-article/i-article"
				})

				getApp().globalData.i_article = data;
			},
		},

		filters: {
			getTime(time) {
				return moment(time * 1000).format('YYYY-M-DD');
			}
		}


	}
</script>

<style scoped lang="scss">
	.d-recommend {
		font-size: 32rpx;
		color: #333;
		font-family: "Microsoft YaHei";

		// 标题共同样式
		.d-title {
			/* 多行文本溢出隐藏 */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/*设置对齐模式*/
			-webkit-line-clamp: 2;
			/*设置多行的行数*/
			margin-bottom: 10rpx;
		}

		// 尾部共同样式
		.d-footer {
			display: flex;
			margin-top: 8rpx;
			color: #999;
			font-size: 24rpx;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 1px solid #edebee;

			.pinlun {
				margin: 0 20rpx;
			}
		}

		.d-video {

			.video-cover {
				position: relative;
				width: 100%;
				height: 400rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}

				.bg {
					position: absolute;
					z-index: 5;
					left: 50%;
					top: 50%;
					width: 80rpx;
					height: 80rpx;
					transform: translate(-50%, -50%);
					opacity: 0.6;

					iamge {
						width: 100%;
						height: 100%;

					}
				}
			}

		}

		.d-article {

			.article-cover {
				display: flex;
				width: 100%;
				height: 180rpx;
				border-radius: 8rpx;
				overflow: hidden;

				.img {
					flex: 1;
					height: 180rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.img-two {
					border-left: 2px solid #fff;
					border-right: 2px solid #fff;
				}
			}
		}
	}
</style>
